<!DOCTYPE html>
<html>
<head>
    <title>API</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    
        <div id="example" class="k-content">

            <div class="configuration">
                <span class="configHead">API Functions</span>
                <ul class="options">
                    <li>
                        <input type="text" id="toggleIndex" class="k-textbox"/> <button class="toggleItem k-button">Enable/Disable</button>
                    </li>
                    <li>
                        <input type="text" id="triggerIndex" class="k-textbox"/> <button class="triggerItem k-button">Open/Close</button>
                    </li>
                    <li>
                        <input type="text" id="removeIndex" class="k-textbox"/> <button class="removeItem k-button">Remove</button>
                    </li>
                    <li>
                        <input type="text" value="Item" id="appendText" class="k-textbox"/> <input type="text" value="0.0" id="appendIndex" class="k-textbox"/> <button class="appendItem k-button">Append</button>
                    </li>
                    <li>
                        <input type="text" value="Item" id="beforeText" class="k-textbox"/> <input type="text" value="0" id="beforeIndex" class="k-textbox"/> <button class="beforeItem k-button">Before</button>
                    </li>
                    <li>
                        <input type="text" value="Item" id="afterText" class="k-textbox"/> <input type="text" value="0" id="afterIndex" class="k-textbox"/> <button class="afterItem k-button">After</button>
                    </li>
                    <li>
                        <button class="toggleTextItems k-button">Enable/Disable all Sub Item 3</button>
                    </li>
                    <li>
                        <button class="toggleStrongItems k-button">Enable/Disable <strong>strong</strong> elements</button>
                    </li>
                    <li>
                        <button class="toggleRedTextItems k-button">Enable/Disable <span class="redText">.redText</span> elements</button>
                    </li>
                </ul>
            </div>
            <style scoped>
                .redText,
                .redText > .k-link {
                    color: red;
                }

                .redText.k-state-disabled > .k-link {
                    color: lightcoral;
                }
            </style>

            <ul id="menu"></ul>
            <script>
                $(document).ready(function() {
                    // You can also find an item by its cssClass
                    var getItem = function (target) {
                            var itemIndexes = target.val().split(/[.,]/),
                                item = menu.element;

                            if (itemIndexes[0] !== "") {
                                for (var i = 0, len = itemIndexes.length; i < len; i++) {
                                    item = item.children("li").eq(itemIndexes[i]);
                                    if (i < len-1) {
                                        item = item.find("ul:first");
                                    }
                                }
                            }

                            return item;
                        },
                        toggle = function (e) {
                            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                                var item = getItem($("#toggleIndex"));
                                menu.enable(item, item.hasClass("k-state-disabled"));
                            }
                        },
                        trigger =  function (e) {
                            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                                var item = getItem($("#triggerIndex"));

                                if (item.hasClass("k-state-active"))
                                    menu.close(item);
                                else
                                    menu.open(item);
                            }
                        },
                        remove = function (e) {
                            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                                menu.remove(getItem($("#removeIndex")));
                        },
                        append = function (e) {
                            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                                menu.append({
                                        text: $("#appendText").val()
                                    }, getItem($("#appendIndex")));
                            }
                        },
                        before = function (e) {
                            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                                menu.insertBefore({
                                        text: $("#beforeText").val()
                                    }, getItem($("#beforeIndex")));
                            }
                        },
                        after = function (e) {
                            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                                menu.insertAfter({
                                        text: $("#afterText").val()
                                    }, getItem($("#afterIndex")));
                            }
                        },

                        toggleText = function () {
                            var items = $("#menu").find(".k-link:contains(Sub Item 3)").parent();
                            menu.enable(items, items.hasClass("k-state-disabled"));
                        },

                        toggleStrong = function () {
                            var items = $("#menu").find(":has(> strong)").parent();
                            menu.enable(items, items.hasClass("k-state-disabled"));
                        },

                        toggleRedText = function () {
                            menu.enable(".redText", $("#menu").find(".redText").hasClass("k-state-disabled"));
                        };

                    $(".toggleItem").click(toggle);
                    $("#toggleIndex").keypress(toggle);

                    $(".triggerItem").click(trigger);
                    $("#triggerIndex").keypress(trigger);

                    $(".removeItem").click(remove);
                    $("#removeIndex").keypress(remove);

                    $(".appendItem").click(append);
                    $("#appendText,#appendIndex").keypress(append);

                    $(".beforeItem").click(before);
                    $("#beforeText,#beforeIndex").keypress(before);

                    $(".afterItem").click(after);
                    $("#afterText,#afterIndex").keypress(after);

                    $(".toggleTextItems").click(toggleText);
                    $(".toggleStrongItems").click(toggleStrong);
                    $(".toggleRedTextItems").click(toggleRedText);
                });

                var menu = $("#menu").kendoMenu({
                    dataSource: [
                        {
                            text: "First Item",
                            items: [
                                { text: "Sub Item 1" },
                                { text: "<strong>Sub Item 2</strong>", encoded: false },
                                { text: "Sub Item 3" },
                                { text: "Sub Item 4" }
                            ]
                        },
                        {
                            text: "<strong>Second Item</strong>",
                            encoded: false,
                            items: [
                                { text: "Sub Item 1" },
                                { text: "Sub Item 2" },
                                { text: "Sub Item 3" },
                                { text: "Sub Item 4" }
                            ]
                        },
                        {
                            text: "<strong>Third Item</strong>",
                            encoded: false,
                            items: [
                                { text: "Sub Item 1" },
                                { text: "Sub Item 2" },
                                { text: "Sub Item 3" },
                                { text: "Sub Item 4" }
                            ]
                        },
                        {
                            text: "Fourth Item",
                            cssClass: "redText",
                            items: [
                                { text: "Sub Item 1" },
                                { text: "<strong>Sub Item 2</strong>", encoded: false },
                                { text: "Sub Item 3" },
                                { text: "Sub Item 4" }
                            ]
                        },
                        {
                            text: "Fifth Item",
                            items: [
                                { text: "Sub Item 1" },
                                { text: "Sub Item 2", cssClass: "redText" },
                                { text: "Sub Item 3" },
                                { text: "Sub Item 4" }
                            ]
                        }
                    ]
                }).css({ marginRight: "250px" }).data("kendoMenu");
            </script>
            <style scoped>
                .configuration .k-textbox {
                    width: 40px;
                }
            </style>
        </div>

</body>
</html>
